<template>
	<view>
		<view class="p-2 border-bottom d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				收货人：</view>
			<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.name" />
		</view>
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				手机号码：</view>
			<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.phone" />
		</view>
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				邮箱：</view>
			<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.email" />
		</view>
		<view class="p-2 border-bottom d-flex a-center bg-white span-20">
			<view class="font-md mr-1  text-secondary picker-width input-city d-flex">
				<view>所在地区：</view>
				<!-- 禁用的输入框，显示选择的省市区，绑定 ruleForm 中的 path 属性，点击触发 openPicker 方法 -->
				<input placeholder="请选择省市区" disabled type="text" v-model="ruleForm.path" class="flex-1"
					@click="openPicker" />
				<!-- 自定义省市区选择组件，传递省、市、区信息，监听相关事件 -->
				<cc-selectDity :province="ruleForm.province" :city="ruleForm.city" :area="ruleForm.district"
					:show="show" @changeClick="changeClick" @sureSelectArea="onsetCity"
					@hideShow="onhideShow"></cc-selectDity>
			</view>
		</view>
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				详细地址：</view>
			<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.address" />
		</view>
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				设为默认地址：</view>
			<!-- 开关组件，绑定 ruleForm 中的 default 属性，点击触发 changeSwitch 方法 -->
			<switch class="ml-auto" color="#FD6801" :checked="ruleForm.default" @change="changeSwitch" />
		</view>
		<view class="p-3">
			<!-- 点击触发 submit 方法 -->
			<view class="text-center w-100 main-bg-color text-white font-md rounded py-2"
				hover-class="main-bg-hover-color" @click="submit">
				保 存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				show: false, // 控制省市区选择器的显示与隐藏
				index: 0, // 地址列表的索引
				ruleForm: { // 表单数据对象
					name: '',
					phone: '',
					email: '',
					path: '',
					province: '安徽省',
					city: '合肥市',
					district: '新站区',
					address: '',
					default: 0
				},
				rules: { // 表单验证规则
					name: [{
						message: '请输入正确的用户名',
						rule: /^[\u4e00-\u9fa5]{2,10}$/
					}],
					phone: [{
						message: '请输入正确的手机号',
						rule: /^1[3-9]\d{9}$/

					}],
					email: [{
						message: '请输入正确的邮箱',
						rule: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
					}],
					path: [{
						message: '请输入正确的省市区',
						rule: /^[\u4e00-\u9fa5]+[a-zA-Z0-9]*$/
					}],
					address: [{
						message: '请输入正确的地址',
						rule: /^.{2,30}$/

					}]
				}
			}
		},
		// 页面加载时执行的钩子函数
		onLoad(e) {
			this.index = e.key // 获取传递的地址列表索引
		},
		// 计算属性
		computed: { // 从 vuex 中获取地址列表
			...mapState({
				list: state => state.address.List
			})
		},
		// 组件挂载完成后执行的钩子函数
		mounted() {
			// this.ruleForm = this.list[this.index]
			// 合并地址列表中的数据到 ruleForm
			this.ruleForm = Object.assign(this.ruleForm, this.list[this.index])
			// 拼接省市区信息到 path 属性
			this.ruleForm.path = this.ruleForm.province + this.ruleForm.city + this.ruleForm.district
		},
		// 组件方法
		methods: {
			// 表单验证方法
			validate(key) {
				let check = true;
				// 遍历对应字段的验证规则
				this.rules[key].forEach(v => {
					if (!v.rule.test(this.ruleForm[key])) {
						// 验证不通过，显示提示信息
						uni.showToast({
							title: v.message,
							icon: 'none'
						})
						check = false
					}
				})
				return check;
			},
			// 提交表单方法
			submit() {
				// 依次验证各个字段
				if (!this.validate('name')) {
					return;
				};
				if (!this.validate('phone')) {
					return;
				};
				if (!this.validate('email')) {
					return;
				};
				if (!this.validate('path')) {
					return;
				};
				if (!this.validate('address')) {
					return;
				};
				// 所有字段验证通过，可进行后续保存操作
			},
			// 打开省市区选择器方法
			openPicker() {
				console.log('执行打开地址选择器')
				// 显示省市区选择器
				this.show = true
			},
			// 省市区选择器选择改变事件处理方法
			changeClick(value, value2, value3, value4) {
				console.log('地址选择器 = ' + value + value2 + value3 + value4);
				// 更新省、市、区信息
				this.ruleForm.province = value;
				this.ruleForm.city = value2;
				this.ruleForm.district = value3;
			},
			// 关闭省市区选择器方法
			onhideShow() {
				// 隐藏省市区选择器
				this.show = false
				console.log('执行了关闭地址选择器')
			},
			// 选中省市区后处理方法
			onsetCity(e) {
				let data = e.detail.target.dataset;
				// 拼接省市区信息
				let address = data.province + data.city + data.area;
				// 隐藏省市区选择器
				this.show = false
				// 更新 path 属性
				this.ruleForm.path = address
				console.log('qqqq', this.ruleForm.path);
			},
		}
	}
</script>

<style>

</style>